<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
  <link rel='stylesheet' href='../../dist/mapbox.css'/>
  <link rel='stylesheet' href='embed.css'/>
  <script src='../../dist/mapbox.js'></script>
  <script src='access_token.js'></script>
</head>
<body>
<style>
    #map {
      pointer-events: all;
      cursor: none
    }
    #zoommap {
        width: 200px;
        height: 200px;
        background: beige;
        transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
    }

    #zoomlens {
        overflow: visible;
        top: -9999px;
        left: -9999px;
    }

    #border {
        margin: -5px;
        border: #888 solid 5px;
        border-radius: 50%;
        box-shadow: 0px 0px 10px #888;
    }

    .overlay {
        position: absolute;
        pointer-events: none;
        overflow: hidden;
        width: 200px;
        height: 200px;
    }

    .rotater {
        transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
    }
</style>
<body>
<div id='map'></div>
<div id='zoomlens' class='overlay'>
    <div class='overlay rotater'>
        <div class='overlay rotater'>
            <div id='zoommap' class='overlay'></div>
        </div>
    </div>
    <div id='border' class='overlay'></div>
</div>
<script>
    var map = L.mapbox.map('map', 'mapbox.light');
    var zoommap = L.mapbox.map('zoommap', 'tristen.map-ixqro653', {
        fadeAnimation: false,
        zoomControl: false,
        attributionControl: false
    });

    var zl = document.getElementById('zoomlens');

    map.on('mousemove', update);
    map.on('zoomend', zoom);

    function zoom(e) {
        if (zoommap._loaded) zoommap.setZoom(e.target.getZoom() + 1);
    }

    function update(e) {
        zl.style.top = ~~e.containerPoint.y - 100 + 'px';
        zl.style.left = ~~e.containerPoint.x - 100 + 'px';
        zoommap.setView(e.latlng, map.getZoom() + 1, true);
    }
</script>
</body>
</html>
